<template>
    <ContentBase>
        <div class="content-top">
            <span style="font-size: 150%;">通知公告</span>
        </div>
        <ul class="nav nav-tabs" style="margin-bottom: 20px;">
            <li class="nav-item position-relative">
                <router-link :class="route_name == 'UnreadEvent' ? 'nav-link active' : 'nav-link'" :to="{name: 'UnreadEvent'}">未读</router-link>
                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" v-if="$store.state.user.unread_event_count !== 0">
                    {{ store.state.user.unread_event_count }}
                </span>
            </li>
            <li class="nav-item">
                <router-link :class="route_name == 'ReadEvent' ? 'nav-link active' : 'nav-link'" :to="{name: 'ReadEvent'}">已读</router-link>
            </li>
        </ul>
        <router-view />
    </ContentBase>
</template>

<script setup>
import ContentBase from '../components/ContentBase';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const route = useRoute();
let route_name = computed(() => route.name);

</script>

<style scoped>

.content-top {
    margin-bottom: 20px;
}

</style>